나만의 첫 화면 만들기

클라이언트 사이드 중심으로 설명합니다

QCN

학습 목표

HandStack 프레임워크를 사용하여 새로운 웹 화면을 직접 만들어봅니다.
HTML 파일과 JavaScript 파일을 생성하고, 두 파일이 어떻게 상호작용하여 동적인 화면을 만드는지 이해합니다.

  • TST010.html 파일 생성 및 기본 구조 작성
  • TST010.js 파일 생성 및 화면 로직 작성
  • 브라우저에서 직접 만든 화면을 확인하고 테스트
QCN

모듈 화면 파일 위치

wwwroot는 웹 서버를 통해 직접 접근할 수 있는 파일들이 위치하는 디렉토리입니다.

경로: $(HANDSTACK_SRC)/2.Modules/[모듈 ID]/wwwroot/view/[앱 ID]

  • 이 경로 안에 TST010.html과 TST010.js 두 개의 파일을 생성합니다.

http://localhost:8421/[모듈 ID]/view/TST/TST010.html

QCN

공통 화면 파일 위치

공통 화면 파일은 정해진 경로에 만들어야 합니다.

모듈경로: $(HANDSTACK_SRC)/2.Modules/[모듈 ID]/Contracts/wwwroot/[앱 ID]

다음과 같이 화면에 대한 개발 소스를 단일 디렉토리내에 저장합니다.

%HANDSTACK_HOME%\contracts
└─wwwroot
   └─HDS
       └─TST
           └─TST010.html
           └─TST010.js

http://localhost:8421/view/TST/TST010.html

QCN

HTML 요소에 적용 가능한 syn-* 속성 3개

  • syn-datafield: 서버와의 요청/응답에 매칭되는 ID
  • syn-events: 사용자의 클릭, 입력과 같은 이벤트
  • syn-options: 사용자 입력에 대응하는 UI 컨트롤의 모양과 기능 설정
QCN

HTML 요소 ID는 헝그리안 표기법을 사용

syn-* 속성 선언을 하면 HTML 요소를 고유하게 식별할 수 있는 id 속성은 반드시 선언해야 합니다.

btn: BUTTON
txt: INPUT [type]
  hdn: hidden
  txt: text
  pin: password
  clr: color
  eml: email
  num: number
  txt: search
  tel: tel
  url: url
  smt: submit
  rst: reset
  btn: button
  rdo: radio
  chk: checkbox
txt: TEXTAREA
ddl: SELECT (multiple)
grd: SYN_GRID
cht: SYN_CHART
chp: SYN_CODEPICKER
clp: SYN_COLORPICKER
dtp: SYN_DATEPICKER
edt: SYN_EDITOR
etc: ETC...
QCN

syn-datafield 속성

서버와의 거래 요청 및 응답이 필요한 사용자 입력에 대응하는 HTML 태그(이하 UI 컨트롤)에 선언됩니다.

BUTTON
INPUT [type]
    hidden
    text
    password
    button
    radio
    checkbox
    ...
TEXTAREA
SELECT (multiple)
SYN_GRID
SYN_CHART
SYN_CODEPICKER
SYN_COLORPICKER
SYN_DATEPICKER
SYN_EDITOR
ETC...
QCN

syn-options 속성

컨트롤에 따라 지원하는 옵션 항목이 다르며 대소문자를 구분합니다. JSON 문법을 사용합니다.

$(HANDSTACK_SRC)/2.Modules/wwwroot/wwwroot/uicontrols/**.js

<input id="txtEmailID" syn-datafield="EmailID" syn-options="{editType: 'text', belongID: ['LD01']}">
<select class="form-select" id="ddlProjectRole" syn-datafield="ProjectRole" syn-options="{toSynControl: false,
belongID: ['LD01']}">
    <option value="" selected="">전체</option>
</select>

<input id="txtMemberName" syn-datafield="MemberName" syn-options="{editType: 'text', belongID: ['LD01']}">
<syn_datepicker id="dtpCreatedStartAt" syn-datafield="CreatedStartAt" syn-options="{value: 'month:-6',
useRangeSelect: true, 
rangeEndControlID: 'dtpCreatedEndAt', 
belongID: ['LD01']}"></syn_datepicker>
<syn_datepicker id="dtpCreatedEndAt" syn-datafield="CreatedEndAt" syn-options="{value: 'now', 
useRangeSelect: true, 
rangeStartControlID: 'dtpCreatedStartAt', 
belongID: ['LD01']}"></syn_datepicker>
QCN

HTML 파일 생성 (TST010.html)

먼저, 웹 페이지의 뼈대가 되는 HTML 파일을 만듭니다. syn.loader.js 파일은 HandStack의 클라이언트 리소스를 로드하는 핵심 스크립트입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body style="visibility: hidden;">
    <form autocomplete="off" id="form1" syn-datafield="MainForm">
        <!-- 화면 요소들이 여기에 추가됩니다 -->
    </form>
    <script src="/js/syn.loader.js"></script>
</body>
</html>
QCN

JavaScript 파일 생성 (TST010.js)

다음으로, 화면의 동작과 데이터를 관리하는 동일한 이름의 JavaScript 파일과 $ 접두어를 사용하는 객체을 만듭니다.

'use strict';
let $TST010 = {
    // 공통 기능 상속 선언 (지금은 비워둡니다)
    extends: [],
    // 화면 구성에 필요한 환경설정 (지금은 비워둡니다)
    config: {},
    // 화면 내에서 사용할 전역 변수 선언
    prop: {
        custom1: '블라블라',
        custom2: 12345,
        custom3: ['hello', 'world']
    },
    // 사용자 이벤트 핸들러 선언
    event: {},
    // 기능 메서드 선언
    method: {}
};
QCN

JavaScript 구조 살펴보기

$TST010 객체 안의 각 속성은 명확한 역할을 가집니다.

  • extends: 다른 화면의 공통 기능을 상속받아 재사용할 때 사용합니다.
  • config: 화면 초기화 시 필요한 설정을 정의합니다.
  • prop: 이 화면에서만 사용할 변수를 선언합니다. custom1, custom2 처럼 다양한 타입의 데이터를 저장할 수 있습니다.
  • event: 사용자의 클릭, 입력과 같은 동작에 반응하는 함수를 정의합니다.
  • hook: 의도된 공통 업무 동작에 반응하는 함수를 정의합니다.
  • method: 화면에서 재 사용될 수 있는 기능들을 함수로 만들어 정의합니다.
  • transaction: 화면에서 호출 가능한 거래들을 정의합니다.
QCN

이벤트 핸들러 추가하기

사용자 인터랙션을 처리하기 위해 event 객체에 실제 함수를 추가해 봅시다.

  • 함수 이름은 [HTML요소ID]_[이벤트명] 규칙을 따릅니다.
  • $this는 현재 화면 객체($TST010)를 가리킵니다.
// ... (prop 부분 아래)
event: {
    txtApplicationID_click(evt) {
        // prop에 선언된 변수 사용
        console.log($this.prop.custom1);
    },
    txtApplicationName_focus(evt) {
        console.log($this.prop.custom2.toString());
    },
    txtApplicationName_change(evt) {
        console.log($this.prop.custom3.toString());
    }
},
// ...
QCN

주요 이벤트 카테고리

  • 마우스 이벤트:
    click, dblclick, mousedown, mouseup, mouseover, ouseout, mousemove,mouseenter, mouseleave
  • 키보드 이벤트:
    keydown, keyup, keypress
  • 폼 이벤트:
    focus, blur ,change, input ,submit, reset
  • 기타 자주 사용되는 이벤트:
    load, resize, scroll, touchstart, touchend, touchmove (모바일)
QCN

HTML 요소와 이벤트 연결하기

JavaScript에 정의한 이벤트 핸들러를 HTML 요소와 연결해야 합니다.
syn-events 속성을 사용합니다.

<form id="form1" syn-datafield="MainForm">
    - Application ID: 
    <input type="text" id="txtApplicationID" syn-events="['click']">
    - Application Name: 
    <input type="text" id="txtApplicationName" syn-events="['focus','change']">
</form>
QCN

Javascript에서 다음과 같이 이벤트 핸들러를 연결하기

syn.$l.addEvent(window, 'resize', () => {
});

syn.$l.addEvent(document.body, 'click', () => {
});

syn.$l.addEvent('btnDynamicEvent', 'click', $this.event.btnDynamicEvent_click);

표준 이벤트 명에 대해 다음을 참고하세요. HTML Event Attributes

QCN

현재 화면 객체를 참조하는 $this 키워드

  • this 키워드는 실행 컨텍스트에 따라 다른 객체를 참조하는 특별한 키워드
  • JavaScript 에 익숙하지 않은 개발자들이 어려워하는 부분
    • 객체 메서드에서의 this
    • 일반 함수에서의 this
    • 생성자 함수에서의 this
    • 이벤트 핸들러에서의 this
  • 프레임워크에서 정의한 변수로 $this === $TST010 의미를 사용
syn.$l.addEvent('btnDynamicEvent', 'click', $this.event.btnDynamicEvent_click);
QCN

핸즈온: 직접 확인해보기

이제 모든 준비가 끝났습니다. 브라우저에서 다음의 조건을 충족하는 직접 만든 화면을 만들어봅시다.

  1. HandStack 프로젝트를 실행합니다.
  2. 브라우저를 열고 http://localhost:8421/view/TST/TST010.html로 접속합니다.
  3. 브라우저의 개발자 도구(F12)를 열고 Console 탭을 선택합니다.
  4. Application ID 입력란을 클릭해 보세요. 콘솔에 '블라블라'가 출력됩니다.
  5. Application Name 입력란에 포커스를 맞추고, 내용을 수정한 뒤 포커스를 잃게 해보세요. 콘솔에 12345와 hello,world가 차례로 출력될 것입니다.
QCN

요약 정리 및 Q&A

축하합니다! 여러분은 방금 HandStack을 이용해 상호작용이 가능한 첫 웹 화면을 직접 만들었습니다.

  • HTML로 구조를 만들고, JavaScript로 동작을 정의했습니다.
  • syn-events 속성을 통해 둘을 간단하게 연결하는 방법을 배웠습니다.
  • $this.prop을 통해 화면 내 데이터를 관리하는 방법을 경험했습니다.

이제 여러분은 단순한 텍스트 수정이 아니라, 직접 인터렉티브 한 웹 페이지를 하나 추가하는 방법을 알게 되었어요! 웹 개발의 핵심 단계 중 하나를 성공한 겁니다.

QCN